import React, { useReducer, useEffect } from 'react'
import { initState, reducer, actions } from "./detail"
// 引入api
import { reqDetail,reqShopAdd } from "../../request/api";
// 引入css样式
import "./detail.css"

export default function Detail(props) {
    const [state, dispatch] = useReducer(reducer, initState);
    let detailGood = state.detail
    //相当于生命周期
    useEffect(() => {
        reqDetail({id:props.match.params.id}).then(res=>{
            if(res.data.code===200){
                dispatch(actions.changeDetail(res.data.list[0]))
            }
        })
    }, []); // eslint-disable-line react-hooks/exhaustive-deps
    // 添加购物车
    let addShop=(id)=>{
        reqShopAdd({uid:JSON.parse(sessionStorage.getItem("user")).uid,type:1,goodsid:id,num:1})
    }
    return (
        <div className="detail">
                <div className="top">
                    <h3>详情</h3>
                </div>
                <div className="main">
                    <div className="img"><img src={detailGood?detailGood.img:"#"} alt=""/></div>
                    <div>限时<span className="price">￥{detailGood?detailGood.price:"#"}</span><span className="market_price">￥{detailGood?detailGood.market_price:"#"}</span></div>
                    <div className="goodsname">{detailGood?detailGood.goodsname:"#"}</div>
                    <div className="description">{detailGood?detailGood.description:"#"}</div>
                </div>
                <div className="bottom">
                    <div className="shop">购物车</div>
                    <div className="addshop" onClick={()=>addShop(props.match.params.id)}>加入购物车</div>
                    <div className="buy">立即购买</div>
                </div>
            </div>
    )
}
